<template>
    <div>
        <h3>热门图书</h3>
        <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto"></ul>
        <div class="demo-image">
            <div class="block" v-for="book in books">
                <span class="demonstration"></span>
                <el-image :src="book.url" @click="jump(book.type)"></el-image>
            </div>
        </div>
        </ul>
    </div>
</template>

<script>
    export default {

        created() {
            this.getHotList();
        },

        data() {
            return {
                books: [],
            }
        },

        methods: {
            load() {
                this.count += 2
            },
            async getHotList() {
                const { data: res } = await this.$http.post("/book/hot/list");
                this.books = res.data;
            },
            jump(type) {
                let search = "";
                if (type === 0) {
                    search = "C语言";
                } else if (type === 1) {
                    search = "Java";
                } else if (type === 2) {
                    search = "Python";
                } else if (type === 3) {
                    search = "Golang";
                } else if (type === 4) {
                    search = "JavaScript";
                }
                window.open("https://search.jd.com/Search?keyword="
                    + search + "%E4%B9%A6%E7%B1%8D&enc=utf-8&wq="
                    + search + "%E4%B9%A6%E7%B1%8D&pvid=5267e8f71fc3461f9e9609820f664272");
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-image {
        width: 19%;
        height: 230px;
        margin-top: 20px;
        margin-left: 10px;
        float: left;
    }
</style>